/* ==========================================================================
   Loja Stop Killing Games — style page 2.css
   Mobile-first, responsivo para Android, iOS, tablet, notebook e PC.
   ========================================================================== */

* {
  box-sizing: border-box;
}

header,
.meu-cabecalho {
  background-color: rgb(24, 21, 151);
  padding: 18px 22px;
  color: #fff;
}

.meu-cabecalho h1 {
  color: #f5f1f1;
  font-size: clamp(1.2rem, 4vw, 2rem);
}

.link-header {
  color: #fff;
  text-decoration: none;
  font-size: 0.95rem;
}

.link-header:hover {
  text-decoration: underline;
}

body {
  margin: 0;
  background-color: #0e0c3d;
  background-image: url(../images/fundo-2.jpeg);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-attachment: fixed;
  font-family: var(--bs-font-sans-serif, system-ui, sans-serif);
  min-height: 100vh;
}

img {
  max-width: 100%;
  height: auto;
}

.texto-loja-titulo {
  color: #fff;
  font-weight: 700;
}

.texto-loja-sub {
  color: #e7e7f5;
}

/* ---- Cards de produto ---- */
.card-produto {
  background-color: rgba(255, 255, 255, 0.96);
  border: none;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.card-produto:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.35);
}

.produto-foto {
  cursor: pointer;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.produto-foto:focus-visible {
  outline: 3px solid #ffd400;
  outline-offset: -3px;
}

.produto-preco {
  font-weight: 700;
  color: rgb(24, 21, 151);
  font-size: 1.05rem;
}

.btn-comprar {
  background-color: rgb(24, 21, 151);
  border-color: rgb(24, 21, 151);
}

.btn-comprar:hover {
  background-color: #100e63;
  border-color: #100e63;
}

#filtros-categoria .btn.active {
  background-color: #fff;
  color: rgb(24, 21, 151);
}

.btn-carrinho {
  color: rgb(24, 21, 151);
  font-weight: 600;
}

.carrinho-item {
  padding: 0.4rem 0;
  border-bottom: 1px solid #eee;
  font-size: 0.9rem;
}

/* Evita travar o scroll em celulares (Android/iOS) */
@media (max-width: 767.98px) {
  body {
    background-attachment: scroll;
  }
}

@media (min-width: 1400px) {
  main {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }
}